import 'package:ai_desktop_eidtor/common/y_button.dart';
import 'package:ai_desktop_eidtor/common/y_field.dart';
import 'package:ai_desktop_eidtor/common/y_text.dart';
import 'package:ai_desktop_eidtor/util/string_util.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

import '../../util/event.dart';
import 'editor_logic.dart';
import 'editor_state.dart';

class EditorPage extends StatelessWidget {
  EditorPage({Key? key}) : super(key: key);
  final EditorLogic logic = Get.put(EditorLogic());
  final EditorState state = Get.find<EditorLogic>().state;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FocusableActionDetector(
        autofocus: true,
        shortcuts: {
          LogicalKeySet(LogicalKeyboardKey.meta, LogicalKeyboardKey.keyS):SaveIntent(),
          LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyS):
          SaveIntent(),
          LogicalKeySet(LogicalKeyboardKey.enter):EnterIntent(),
          LogicalKeySet(LogicalKeyboardKey.escape):CancelIntent(),
        },
        actions: {
          SaveIntent: CallbackAction<SaveIntent>(
            onInvoke: (intent) {
              logic.saveChapter();
              return null;
            },
          ),
          EnterIntent: CallbackAction<EnterIntent>(
            onInvoke: (intent) {
              logic.input.text += '\n';
              logic.saveChapter();
              return null;
            },
          ),
          CancelIntent: CallbackAction<CancelIntent>(
            onInvoke: (intent){
              logic.saveChapter(okBlock: (){
                Get.back();
              });
              return null;
            },
          ),
        },
        child: GetBuilder<EditorLogic>(builder: (_) => Column(
          children: [
            Container(
              padding: EdgeInsets.only(left: 20, right: 20),
              height: 64,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    onTap: () {
                      Get.back();
                    },
                    child: Icon(Icons.arrow_back_ios, color: Colors.black),
                  ),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        YText(
                          text: "《${logic.title}》",
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: Colors.blue,
                        ),
                        if(logic.chapters.isNotEmpty) YText(
                          text: logic.chapters[logic.currentChapterIndex.value].title,
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: Colors.green,
                        ),
                        hSpace(10),
                      ],
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      logic.openOrFold();
                    },
                    child: Icon(Icons.edit_calendar, color: Colors.blue),
                  ),
                  SizedBox(width: 10),
                  GestureDetector(
                    onTap: () {
                      logic.addChapter();
                    },
                    child: Icon(Icons.add_circle, color: Colors.blue),
                  ),
                ],
              ),
            ),
            Divider(height: 1, color: Colors.grey),
            Expanded(
              child: Obx(
                    () => Row(
                  children: [
                    if (logic.isFold.value) _chaperWidget(),
                    if (logic.isFold.value) VerticalDivider(width: 1, color: Colors.grey),
                    Expanded(child: _contentWidget()),
                  ],
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(right: 20, bottom: 10),
              alignment: Alignment.centerRight,
              child: Obx(() => YText(text: '当前字数:${logic.length.value}')),
            ),
          ],
        )),
      ),
    );
  }

  Widget _chaperWidget() {
    return Container(
      color: Colors.transparent,
      width: 200,
      child: Column(
        children: [
          Container(
            height: 50,
            alignment: Alignment.center,
            child: YText(text: '目录'),
          ),

          Expanded(
            child: ListView.builder(
              itemBuilder: (ctx, index) {
                return GestureDetector(
                  onTap: () {
                    logic.switchChapterIndex(index);
                  },
                  child: Obx(
                    () => Container(
                      padding: EdgeInsets.only(top: 12, bottom: 12,left: 10,right: 10),
                      color: logic.currentChapterIndex.value == index ? Colors.blue : Colors.transparent,
                      child: YText(
                        text: logic.chapters[index].title,
                        color: logic.currentChapterIndex.value == index ? Colors.white : Colors.black,
                        textAlign: TextAlign.left,
                      ),
                    ),
                  ),
                );
              },
              itemCount: logic.chapters.length,
            ),
          ),
        ],
      ),
    );
  }

  Widget _contentWidget() {
    return Column(
      children: [
        SizedBox(height: 10),
        Container(
          height: 48,
          decoration: BoxDecoration(
            border: Border.all(width: 0.5, color: Colors.grey),
            borderRadius: BorderRadius.circular(10),
          ),
          alignment: Alignment.centerLeft,
          margin: EdgeInsets.only(left: 20, right: 20),
          padding: EdgeInsets.only(left: 20, right: 20),
          child: YField(
            hintStyle: TextStyle(fontSize: 16, color: Colors.grey),
            hintText: '章节标题',
            textAlign: TextAlign.left,
            controller: logic.chapterField,
          ),
        ),
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              border: Border.all(width: 1, color: Colors.blueGrey),
            ),
            padding: EdgeInsets.only(left: 16, right: 16, top: 10, bottom: 10),
            margin: EdgeInsets.only(left: 20, right: 20, top: 10),
            child: YField(
              maxLines: 10000000,
              hintText: '开始写作',
              textAlign: TextAlign.left,
              hintStyle: TextStyle(fontSize: 16, color: Colors.grey),
              controller: logic.input,
              onSubmitted: (v){
                logic.saveChapter();
              },

              onChanged: (t) {
                logic.getTextLength();
              },
            ),
          ),
        ),
      ],
    );
  }
}
